<template>
  <div id="doc" class="markdown-body" v-html="renderedMarkdown"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { marked } from 'marked'

interface Props {
  content: string
}

const props = defineProps<Props>()

// 配置 marked 渲染器，让链接在新窗口打开
const renderer = new marked.Renderer()
const originalLinkRenderer = renderer.link.bind(renderer)

renderer.link = (token: any) => {
  const html = originalLinkRenderer(token)
  return html.replace(/^<a /, '<a target="_blank" rel="noopener noreferrer" ')
}

marked.setOptions({
  renderer: renderer
})

const renderedMarkdown = computed(() => {
  return marked(props.content)
})
</script>

<style scoped>
/** 文本样式 **/
#doc {
  font-size: 14px;
  color: #353535;
  word-spacing: 0.8px;
  letter-spacing: 0.8px;
  border-radius: 5px;
}

#doc :deep(p) {
  line-height: 1.75;
  margin: 7px 0;
}

#doc :deep(a) {
  color: rgb(55, 53, 47);
  font-weight: 400;
  border-bottom: 0.05em solid;
  border-color: rgba(55, 53, 47, .4);
  opacity: 0.7;
  text-decoration: none;
}

#doc :deep(strong) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #FFF3E0 50%, #FFF3E0 100%);
}

#doc :deep(em) {
  color: rgb(248, 57, 41);
}

/* 标题样式 */
#doc :deep(h1) {
  font-size: 22px;
}

#doc :deep(h1 .content) {
  font-weight: 300;
  padding: 3px 0 1px;
}

#doc :deep(h2) {
  font-size: 16px;
  text-align: left;
  margin: 20px 10px 0 0;
}

#doc :deep(h2 .content) {
  font-weight: 700;
  display: inline-block;
  padding-left: 10px;
  border-left: 5px solid rgb(248, 57, 41);
}

#doc :deep(h3) {
  font-size: 16px;
}

#doc :deep(h4) {
  font-size: 15px;
}

#doc :deep(h5) {
  font-size: 14px;
}

#doc :deep(h6) {
  font-size: 14px;
}

/* 列表样式 */
#doc :deep(ul) {
  margin-left: 20px;
  padding-left: 0;
}

#doc :deep(ol) {
  color: #f83929;
  font-size: 14px;
  margin-left: 20px;
  padding-left: 0;
}

#doc :deep(li)::marker {
  color: #f83929;
}

#doc :deep(li) {
  color: #353535;
  margin-top: 7px;
  margin-bottom: 7px;
}

#doc :deep(li section) {
  text-align: left;
  font-size: 14px;
  color: #353535;
}

/* 引用文字 */
#doc :deep(blockquote) {
  font-style: normal;
  border-left: none;
  padding: 10px 10px 25px;
  line-height: 1.75;
  border-radius: 13px;
  color: #353535;
  background: #f5f5f5;
  margin: 1em 0;
}

#doc :deep(blockquote):before {
  content: "\201C";
  display: block;
  font-size: 2em;
  color: rgb(248, 57, 41);
  font-family: Arial, serif;
  line-height: 1em;
  font-weight: 700;
}

#doc :deep(blockquote p) {
  color: #353535;
  font-size: 14px;
  margin: 0 10px;
  display: block;
}

#doc :deep(blockquote):after {
  content: "\201D";
  float: right;
  display: block;
  font-size: 2em;
  color: rgb(248, 57, 41);
  font-family: Arial, serif;
  line-height: 1em;
  font-weight: 700;
}

/* 表格样式 */
#doc :deep(table) {
  border-collapse: collapse;
  margin-top: 16px;
}

#doc :deep(table tr th),
#doc :deep(table tr td) {
  font-size: 13px;
  border: 1px solid #ccc;
  padding: 5px 8px;
}

#doc :deep(table tr th:nth-of-type(n)),
#doc :deep(table tr td:nth-of-type(n)) {
  min-width: 85px;
}

#doc :deep(table tr th) {
  font-size: 14px;
  color: #353535;
  background-color: #dbd9d8;
}

/** 代码样式 */
#doc :deep(pre code) {
  display: -webkit-box;
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
  border-radius: 0;
  font-size: 12px;
  -webkit-overflow-scrolling: touch;
}

#doc :deep(.custom code) {
  padding-top: 14px;
  border-radius: 5px;
  background-color: rgba(238, 238, 238, 0.7);
}

#doc :deep(pre) {
  margin-top: 10px;
  margin-bottom: 10px;
}

#doc :deep(.custom .hljs) {
  display: block;
  overflow-x: auto;
  padding: 16px;
  color: #383a42;
}

#doc :deep(.hljs-comment),
#doc :deep(.hljs-quote) {
  color: #57A64A;
  font-style: italic;
}

/* 分隔线 */
#doc :deep(hr) {
  height: 1px;
  padding: 0;
  border: none;
  text-align: center;
  background-image: linear-gradient(to right, rgba(248, 57, 41, 0), rgba(248, 57, 41, 0.75), rgba(248, 57, 41, 0));
}

/* 图片 */
#doc :deep(figure) {
  border-radius: 16px;
  overflow: hidden;
}

#doc :deep(figure a img) {
  border-radius: 16px;
  width: 100%;
  max-width: 100%;
}

#doc :deep(img) {
  border-radius: 6px;
  display: block;
  max-width: 100%;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

/* 图片描述文字 */
#doc :deep(figcaption) {
  display: block;
  font-size: 12px;
}

#doc :deep(.m-tag2) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 8px;
  margin: 0 3px 0 0;
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
  border: 1px solid transparent;
  box-sizing: border-box;
  white-space: nowrap;
  transition: all 0.2s;
  color: #e6a23c;
  background-color: #fdf6ec;
  border-color: #faecd8;
}

/* 行内代码 */
#doc :deep(p code) {
  font-family: "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace;
  line-height: normal;
  background: rgba(135, 131, 120, .15);
  color: #EB5757;
  border-radius: 4px;
  font-size: 85%;
  padding: 0.2em 0.4em;
}

#doc :deep(li code) {
  font-family: "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace;
  line-height: normal;
  background: rgba(135, 131, 120, .15);
  color: #EB5757;
  border-radius: 4px;
  font-size: 85%;
  padding: 0.2em 0.4em;
}

#doc :deep(.footnotes) {
  font-size: 14px;
}

/* 脚注文字 */
#doc :deep(.footnote-word) {
  font-weight: normal;
  color: #f83929;
}

/* 脚注上标 */
#doc :deep(.footnote-ref) {
  font-weight: normal;
  color: #f83929;
}

/* 脚注链接样式 */
#doc :deep(.footnote-item em) {
  font-size: 14px;
  display: block;
}

/* "参考资料"四个字 */
#doc :deep(.footnotes-sep):before {
  content: '参考资料 ';
  color: #f83929;
  letter-spacing: 1px;
  text-align: left;
  display: block;
  font-weight: 500;
  padding-bottom: .1em;
  border-bottom: 3px double #f83929;
  font-size: 20px;
}

/* 参考资料编号 */
#doc :deep(.footnote-num) {
  color: #f83929;
}

/* 参考资料文字 */
#doc :deep(.footnote-item p) {
  font-weight: 400;
  color: #f83929;
}

/* 参考资料解释 */
#doc :deep(.footnote-item p em) {
  font-weight: 400;
  font-size: 14px;
  color: #353535;
}

/* 行间公式 */
#doc :deep(.block-equation svg) {
  color: #353535;
}

/* 行内公式 */
#doc :deep(.inline-equation svg) {
  color: #353535;
}

/* 滑动图片 */
#doc :deep(.imageflow-img) {
  display: inline-block;
  width: 100%;
  margin-bottom: 0;
}

/* 移动端 Markdown 样式调整 */
@media (max-width: 768px) {
  #doc {
    font-size: 16px !important;
  }

  #doc :deep(p) {
    font-size: 16px !important;
  }

  #doc :deep(h1) {
    font-size: 26px !important;
  }

  #doc :deep(h2) {
    font-size: 18px !important;
  }

  #doc :deep(h3) {
    font-size: 18px !important;
  }

  #doc :deep(h4) {
    font-size: 17px !important;
  }

  #doc :deep(h5) {
    font-size: 16px !important;
  }

  #doc :deep(h6) {
    font-size: 16px !important;
  }

  #doc :deep(li) {
    font-size: 16px !important;
  }

  #doc :deep(li section) {
    font-size: 16px !important;
  }

  #doc :deep(blockquote p) {
    font-size: 16px !important;
  }

  #doc :deep(table tr th),
  #doc :deep(table tr td) {
    font-size: 14px !important;
  }

  #doc :deep(table tr th) {
    font-size: 16px !important;
  }

  #doc :deep(pre code) {
    font-size: 14px !important;
  }

  #doc :deep(figcaption) {
    font-size: 14px !important;
  }

  #doc :deep(.m-tag2) {
    font-size: 14px !important;
  }

  #doc :deep(.footnotes) {
    font-size: 16px !important;
  }

  #doc :deep(.footnote-item em) {
    font-size: 16px !important;
  }

  #doc :deep(.footnote-item p em) {
    font-size: 16px !important;
  }

  #doc :deep(.footnotes-sep):before {
    font-size: 22px !important;
  }
}
</style>
